<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>All Records</title>
<style>
		ul,li{margin: 0;padding: 0;list-style: none;}
		 td{padding: 1%;}
		 table{width:100%;table-layout:fixed;text-align:center;}
    	.pageMenu li::selection{background:transparent;}
		.pageBox{background: #eee;border:1px solid #ebebeb;margin: 0 auto;text-align: center;}
		.hide{display: none;}
		.page{text-align: center;margin: 0 auto;}
		.pageMenu{width:100%; display: inline-block;margin: 0 auto;text-align: center;}
		.table{margin: 0 auto;text-align: center;width:100%;}
		.pageMenu li{border: solid thin #ddd;margin: 3px;float: left;padding: 5px 10px;cursor: pointer;background: #fff;}
		.pageMenu li.firstPage{}
		.pageMenu li.prevPage{}
		.pageMenu li.pageNum{}
		.pageMenu li.nextPage{}
		.pageMenu li.lastPage{}
		.pageMenu li.disabled{ background-color: #DDDDDD;   cursor: not-allowed;}
		.pageMenu li.active{ border: solid thin #0099FF;background-color: #0099FF;color: white;}
		.pageMenu li.last{background: transparent;border:0;position: relative;top: -4px;}
		.page .keuInput{padding: 0 5px;width: 30px;border: solid thin #ddd;height: 29px;outline: none;text-align: center;font-size: 16px;}
		.page .btnSure{padding: 4px 8px;border: solid thin #ddd;outline: none;text-align: center;font-size: 16px;background: #fff;position: relative;top: 2px;}
		.page .btnSure:hover{cursor: pointer;}
</style>

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/mystyle.css" rel="stylesheet" />
<script type="text/javascript">
	
</script>
</head>
<body>
	
		<div class="page">
			<ul class="pageMenu clearfix">
				<li class="firstPage disabled">首页</li>
				<li class="prevPage disabled">&lt; 上一页</li>
				
				<div class="pageObj"></div> 
				<!-- <div class="pageObj "></div> -->
				<li class="nextPage">下一页 &gt;</li>
				<li class="lastPage">尾页</li>
				<li class="last" style="font-size: 14px;">共<span
					class="totalPage"></span>页，跳转至 <input class="keyInput" value="1"
					type="number">
					<button type="button" class="btnSure">确定</button>
				</li>
			</ul>
		</div>
	<div class="table">
	
	
	<table border="1" class="table table-striped table-bordered table-hover">
		<thead><tr>
			<th>A1</th>
			<th>A2</th>
			<th>A3</th>
			<th>A4</th>
			<th>A5</th>
			<th>A6</th>
			<th>A7</th>
			<th>A8</th>
			<th>A9</th>
			<th>A10</th>
			<th>A11</th>
			<th>A12</th>
			<th>quality</th>
		</tr></thead>
		<tbody id="recordsTable">
		
		</tbody>
		
		<%-- 
		<c:forEach var="record" items="${records }">
			<tr>
				<td>${record.a1 }</td>
				<td>${record.a2 }</td>
				<td>${record.a3 }</td>
				<td>${record.a4 }</td>
				<td>${record.a5 }</td>
				<td>${record.a6 }</td>
				<td>${record.a7 }</td>
				<td>${record.a8 }</td>
				<td>${record.a9 }</td>
				<td>${record.a10 }</td>
				<td>${record.a11 }</td>
				<td>${record.a12 }</td>
				<td>${record.quality }</td>
			</tr>
		</c:forEach>--%>
	</table>
</div>
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/page.js"></script>
	<script type="text/javascript">
	var firstPage = $(".firstPage");
    var prevPage = $(".prevPage");
    var pageObj = $(".pageObj");
    var lastPage = $(".lastPage");
    var nextPage = $(".nextPage");
    var keyInput = $(".keyInput");
    var btnSure = $(".btnSure");
    var totalPage = $(".totalPage");
    var pNum = 1;
    var lastNum = 0;
    var cacheNum = 1;
    var min = 0;
    var res = null;
    $(document).ready(function () {

    	for (var i = 0; i < 301; i++) {
    		var pageItem = '<li class="pageNum">' + (i + 1) + '</li>';
    		pageObj.append(pageItem);
    	}

    	firstPage.addClass("disabled");
    	prevPage.addClass("disabled");
    	pageObj.find("li:first-child").addClass("active");
    	totalPage.text(301);
    	// maxPage is what ?
    	cacheNum = 1;
    	showPageIndex(0);
    });
    function showPageIndex(index) {
    	var min;
    	var max;
    	index = index - 1;
    	if (index <= 2) {
    		min = 0;
    		max = 5;
    	} else if (index >= 298) {
    		min = 296;
    		max = 301;
    	} else {
    		min = index - 2;
    		max = index + 3;
    	}

    	$(".pageObj li").hide();
    	for (var i = min; i < max; i++) {
    		$(".pageObj li").eq(i).show();
    	}
        //alert("start ajax");
        $.post("/datanalysis/getRecords",
        {
            pageNumber:cacheNum,
            pageSize:100
        },
        function (data,status){
        	//alert(status);
        	 var recordsTable = $("#recordsTable");
             recordsTable.empty();
             for(var i =0;i<data.length;i++){
                 var record = data[i];
                 var html = "<tr>";
                 html += "<td>"+record.a1+"</td>";
                 html += "<td>"+record.a2+"</td>";
                 html += "<td>"+record.a3+"</td>";
                 html += "<td>"+record.a4+"</td>";
                 html += "<td>"+record.a5+"</td>";
                 html += "<td>"+record.a6+"</td>";
                 html += "<td>"+record.a7+"</td>";
                 html += "<td>"+record.a8+"</td>";
                 html += "<td>"+record.a9+"</td>";
                 html += "<td>"+record.a10+"</td>";
                 html += "<td>"+record.a11+"</td>";
                 html += "<td>"+record.a12+"</td>";
                 html += "<td>"+record.quality+"</td>";
                 html += "</tr>";
                 recordsTable.append(html);
             }
        });
    	// updateTable();
    }
        
    function updateTable(data,status) {
    	alert("start update table use "+data.length+" records.");
        // data is a plain object
       
        
    	// alert("now the page is "+cacheNum);
    }
        
    pageObj.on("click", "li", function () {
    	$(this).addClass("active");
    	$(this).siblings("li").removeClass("active");
    	cacheNum = $(this).text();
    	if ($(this).text() == 1) {
    		firstPage.addClass("disabled");
    		prevPage.addClass("disabled");
    		lastPage.removeClass("disabled");
    		nextPage.removeClass("disabled");
    	} else if ($(this).text() == 301) {
    		firstPage.removeClass("disabled");
    		prevPage.removeClass("disabled");
    		lastPage.addClass("disabled");
    		nextPage.addClass("disabled");
    	} else {
    		firstPage.removeClass("disabled");
    		prevPage.removeClass("disabled");
    		lastPage.removeClass("disabled");
    		nextPage.removeClass("disabled");
    	}
    	keyInput.val($(this).text());
    	showPageIndex($(this).text());
    });

    prevPage.on("click", function () {
    	// alert("prevPage clicked" + cacheNum);
    	if (cacheNum == 1) {
    		prevPage.addClass("disabled");
    		firstPage.addClass("disabled");
    		return;
    	}

    	cacheNum--;
    	lastPage.removeClass("disabled");
    	nextPage.removeClass("disabled");
    	$(".pageObj li").eq(cacheNum - 1).addClass("active");
    	$(".pageObj li").eq(cacheNum - 1).siblings("li").removeClass("active");
    	keyInput.val(cacheNum);
    	showPageIndex(cacheNum)
    });

    nextPage.on("click", function () {
    	if (cacheNum == 301)
    		return;
    	cacheNum++;
    	$(".pageObj li").eq(cacheNum - 1).addClass("active");
    	$(".pageObj li").eq(cacheNum - 1).siblings("li").removeClass("active");
    	if (cacheNum == 301) {
    		lastPage.addClass("disabled");
    		nextPage.addClass("disabled");
    	} else {
    		firstPage.removeClass("disabled");
    		prevPage.removeClass("disabled");
    	}
    	keyInput.val(cacheNum);
    	showPageIndex(cacheNum);
    });

    firstPage.on("click", function () {
    	firstPage.addClass("disabled");
    	prevPage.addClass("disabled");
    	lastPage.removeClass("disabled");
    	nextPage.removeClass("disabled");
    	$(".pageObj li").eq(0).addClass("active");
    	$(".pageObj li").eq(0).siblings("li").removeClass("active");
    	cacheNum = 1;
    	keyInput.val(cacheNum);
    	showPageIndex(1);
    });
        
    lastPage.on("click", function () {
    	lastPage.addClass("disabled");
    	nextPage.addClass("disabled");
    	firstPage.removeClass("disabled");
    	prevPage.removeClass("disabled");
    	$(".pageObj li").eq(301 - 1).addClass("active");
    	$(".pageObj li").eq(301 - 1).siblings("li").removeClass("active");
    	cacheNum = 301;
    	keyInput.val(cacheNum);
    	showPageIndex(cacheNum);
    });

    btnSure.on("click", function () {
    	var val = keyInput.val();
    	if ((val == "") || val <= 0) {
    		opts.keuInput.val(1);
    		alert("请输入有效页码");
    		return
    	}

    	if ((Number(val) > 301)) {
    		alert('共' + 301 + '页');
    		return
    	}

    	$(".pageObj li").eq(val - 1).addClass("active");
    	$(".pageObj li").eq(val - 1).siblings("li").removeClass("active");
    	cacheNum = val;
    	showPageIndex(val);
    	if (val == "1") {
    		firstPage.addClass("disabled");
    		prevPage.addClass("disabled");
    		lastPage.removeClass("disabled");
    		nextPage.removeClass("disabled");

    	} else if (val == 301) {
    		firstPage.removeClass("disabled");
    		prevPage.removeClass("disabled");
    		lastPage.addClass("disabled");
    		nextPage.addClass("disabled");
    	} else {
    		firstPage.removeClass("disabled");
    		prevPage.removeClass("disabled");
    		lastPage.removeClass("disabled");
    		nextPage.removeClass("disabled");
    	}
    });
	</script>
</body>
</html>